<template>
	<view>
		<view class="map">
			<view class="shop_detail" v-for="(item,index) in shopListAll">
				<view class="info">
					<view class="name">{{item.name}}</view>
					<view class="uni_rate"><uni-rate v-model="item.rate" />{{item.rate}}分</view>
					<view class="work_time">营业时间：{{item.startTime}}-{{item.endTime}}</view>
					<view class="address">{{item.address}}</view>
				</view>
				<view>
					<image :src="item.photo" mode=""></image>
				</view>
				<view class="distance">
					{{shopDetail.distance}}m
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 存放根据服务类型查询的门店信息
				shopListAll: [],
				//展示最近的门店数据门店信息
				shopDetail: {
					distance: 44,
				},
				//自己的定位
				myPosition: {
					id: 9999,
					latitude: 39.906935,
					longitude: 116.393477,
					iconPath: '../../static/position.png',
					callout: {
						content: "门店XXXXX1号店",
						borderRadius: 10,
						padding: 10,
						display: "ALWAYS",
					}
				},
				//门店定位
				markers: [ //门店在地图上的标记 以下字段必填 
					{
						id: 999,
						latitude: 39.906935,
						longitude: 116.393477,
						iconPath: '../../static/position.png',
						callout: {
							content: "附近门店>",
							color: "#fff",
							bgColor: '#000',
							borderRadius: 10,
							padding: 10,
							display: "ALWAYS",
						}
					},
					{
						id: 0,
						latitude: 39.906933,
						longitude: 116.393477,
						iconPath: '../../static/position.png'
					},
					{
						id: 1,
						latitude: 39.9086933,
						longitude: 116.393477,
						iconPath: '../../static/门店.png'
					},
					{
						id: 2,
						latitude: 39.9086933,
						longitude: 116.39487,
						iconPath: '../../static/门店.png'
					}
				],
			}
		},
		onLoad(e) {
			console.log(e)
			uni.request({
				url: 'http://localhost/dev-api/business/serviceType/shop/' + e.id,
				method: 'GET',
				header: {
					'authorization': 'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6IjlkOWUxM2I4LTM2YTYtNGFkNC05YWIwLWE0NTlkZmNhZDhkYSIsInVzZXJuYW1lIjoiYWRtaW4ifQ.YiNT6iNJScBfwz_PyLQRHJl12hN2drZpRgFmhQK_lQBubGh879h87d_Wh6lxgeTzyMLeYcOtwd1gz6Hze1jUMQ'
				},
				success: (resp) => {
					this.shopListAll = resp.data.data[0].shop;
				}
			})
		},
		methods: {
			shopDeta() {
				console.log('门店详情');
				uni.navigateTo({
					url: '/pages/carRepair/nearByStores/nearByStores'
				})
			},
			// 弹出框的
			// open() {
			// 	this.$refs.popup.open();
			// },
			// close() {
			// 	this.$refs.popup.close();
			// },
			// toPhone() {
			// 	uni.makePhoneCall({
			// 		phoneNumber: "10086", //要拨打的手机号
			// 		success: (res) => {
			// 			console.log("调用成功")
			// 		},
			// 		fail: (res) => {
			// 			console.log('调用失败!')
			// 		}
			// 	})
			// },
		}
	}
</script>

<style>
	map {
		width: 100%;
		height: 75vh;
	}

	.shop_detail {
		height: 25vh;
		padding-left: 40rpx;
		position: relative;
	}

	.shop_detail image {
		width: 200rpx;
		height: 140rpx;
		padding-top: 10rpx;
	}

	.shop_detail>view:nth-child(2) {
		position: absolute;
		top: 50rpx;
		right: 20rpx;
	}

	.info {
		width: 65%;
		display: inline-block
	}

	.name {
		font-size: 33rpx;
		font-weight: bold;
		padding-top: 20rpx;
	}

	.uni_rate {
		display: flex;
		line-height: 60rpx;
	}

	.work_time,
	.address {
		color: #545454;
	}

	.context,
	.yuyue {
		width: 330rpx;
		height: 90rpx;
		font-size: 30rpx;
		line-height: 90rpx;
		text-align: center;
		border-radius: 45rpx;
	}

	.context {
		background-color: #C3C3C3;
		position: absolute;
		top: 230rpx;
		left: 30rpx;
	}

	.yuyue {
		background-color: #FF4E4E;
		position: absolute;
		top: 230rpx;
		right: 40rpx;
	}

	.distance {
		color: #1D6FFF;
		position: absolute;
		top: 10rpx;
		right: 40rpx;
	}

	.uni-popup view {
		text-align: center;
		border-bottom: 2rpx solid #EFEFEF;
	}

	.tel {
		padding-top: 50rpx;
		padding-bottom: 10rpx;
	}

	.call,
	.cancel {
		line-height: 90rpx;
	}
</style>